<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input v-model="form.name" placeholder="请输入咨询师姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" class="alignRight">
                        <el-button type="primary" @click="searchList()" class="queryBtn">查询</el-button>
                        <el-button
                            class="leadingOut"
                            type="primary"
                            v-if="!hasPermission('adminRole')"
                            @click="addFn()"
                        >添加</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed type="index" label="序号" width="50px"></el-table-column>
                <el-table-column prop="hospitalName" label="医院名称"></el-table-column>
                <el-table-column prop="name" label="咨询师姓名"></el-table-column>
                <el-table-column prop="createdAtStr" label="创建时间"></el-table-column>
                <el-table-column label="咨询师状态">
                    <template slot-scope="scope">{{scope.row.status | statusType}}</template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <!-- 状态开启、关闭按钮 -->
                        <span v-if="!hasPermission('adminRole')">
                            <el-button
                                type="text"
                                v-if="scope.row.status==0"
                                @click="changeStatus(scope.row.consultantId,1)"
                                size="mini"
                            >开启</el-button>
                            <el-button
                                type="text"
                                v-if="scope.row.status==1"
                                @click="changeStatus(scope.row.consultantId,0)"
                                size="mini"
                            >关闭</el-button>
                        </span>

                        <!-- 编辑、删除按钮 -->
                        <el-button
                            type="text"
                            v-if="!hasPermission('adminRole')"
                            size="mini"
                            @click="handleEdit(scope.row.consultantId,scope.row.name)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            v-if="!hasPermission('adminRole')"
                            size="mini"
                            @click="handleDelete(scope.row.consultantId)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="page_sizes"
                        :page-size="form.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page_totals"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加/编辑复用弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="468px">
            <el-form
                :model="dialogForm"
                ref="dialogForm"
                label-width="100px"
                onSubmit="return false"
            >
                <el-form-item label="医院名称">
                    <span>{{getHospitalNames}}</span>
                </el-form-item>
                <el-form-item label="咨询师姓名">
                    <el-input
                        v-model="dialogForm.name"
                        autocomplete="off"
                        @keyup.native.enter="sumbitEditRow"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button v-if="dialogFormFlag" type="primary" @click="sumbitAddRow()">确 定</el-button>
                <el-button v-else type="primary" @click="sumbitEditRow()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import consultant from "@/api/consultant";
export default {
    name: "consultantIndex",
    data() {
        return {
            // loading层
            tableLoading: true,
            // 提交form
            form: {
                pageNum: 1,
                pageSize: 10
            },
            // 主页列表显示
            tableData: [],
            // 分页
            page_sizes: [10, 30, 50, 100],
            page_totals: 60,
            // 弹窗
            dialogTitle: "",
            dialogFormVisible: false,
            dialogFormFlag: false,
            dialogForm: {
                name: ""
            },
            // 定义数据，取值用
            consultantId: null,
            hospitalName: null,
            // 接口获取医院名称
            getHospitalNames:null
        };
    },
    filters: {
        // 状态过滤
        statusType(e) {
            switch (e) {
                case 0:
                    return "已关闭";
                case 1:
                    return "已开启";
                default:
                    return "暂无";
            }
        }
    },
    inject: ["reload"],
    mounted() {
        this.getList(this.form);
        this.getHospitalName()
    },
    methods: {
        //获取医院名称
        getHospitalName(){
            consultant
                .getHospitalName()
                .then(res => {
                    if (!res.data.code){
                        this.getHospitalNames = res.data.data
                        // console.log(res)
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 按钮权限
        hasPermission(e) {
            return window.helper.hasPermission(e);
        },
        //获取列表
        getList(e) {
            consultant
                .getList(e)
                .then(res => {
                    if (!res.data.code) {
                        this.tableData = res.data.data.list;
                        if (res.data.data.list.length > 0) {
                            this.hospitalName =
                                res.data.data.list[0].hospitalName;
                        }
                        this.page_totals = res.data.data.count;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        //搜索
        searchList() {
            this.form.pageNum = 1
            this.getList(this.form);
        },
        // 状态修改
        changeStatus(consultantId, status) {
            let datas = { consultantId, status };
            consultant
                .changeStatus(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.reload();
                        this.succStatus("状态修改成功");
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        // 警告状态弹窗
        warningStatus(txt) {
            this.eleMsg(txt, "warning");
        },
        // 路由跳转
        toRoutes(e, userId) {
            let route = { name: e, query: { userId: userId } };
            this.$router.push(route);
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        },
        // 取消弹窗
        cancel() {
            this.dialogFormVisible = false;
            this.$message("已取消");
        },
        //confirm框
        eleConfirm(e) {
            this.$confirm(e.desc, e.title, {
                confirmButtonText: e.confirmBtnTxt,
                cancelButtonText: e.cancelBtnTxt,
                type: "warning"
            })
                .then(() => {
                    e.fn();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: e.catchInfo
                    });
                });
        },
        // 删除动作
        handleDelete(e) {
            let defineFn = () => {
                let datas = { id: e };
                consultant
                    .delete(datas)
                    .then(res => {
                        if (!res.data.code) {
                            this.reload();
                            this.succStatus("删除成功");
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
                    .catch(err => {
                        this.errorStatus(err);
                    });
            };
            let confirmDatas = {
                desc: "此操作将会删除该数据, 是否继续?",
                title: "提示",
                confirmBtnTxt: "确定",
                cancelBtnTxt: "取消",
                fn: defineFn,
                catchInfo: "已取消删除"
            };
            this.eleConfirm(confirmDatas);
        },
        //添加按钮弹窗
        addFn() {
            this.dialogFormVisible = true;
            this.dialogFormFlag = true;
            this.dialogForm.name = "";
            this.dialogTitle = "添加弹出窗";
        },
        //添加框确定事件
        sumbitAddRow() {
            this.dialogFormVisible = false;
            let datas = { ...this.dialogForm };
            consultant
                .add(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.reload();
                        this.succStatus("添加成功");
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //编辑按钮弹窗
        handleEdit(consultantId, name) {
            this.dialogFormVisible = true;
            this.dialogFormFlag = false;
            this.dialogForm.name = name;
            this.consultantId = consultantId;
            this.dialogTitle = "编辑弹出窗";
        },
        //编辑框确定事件
        sumbitEditRow() {
            this.dialogFormVisible = false;
            let datas = { ...this.dialogForm };
            datas["consultantId"] = this.consultantId;
            consultant
                .edit(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.reload();
                        this.succStatus("编辑成功");
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        }
    }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
    height: 40px;
    margin-top: 20px;
}
.pagesCon > div {
    float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
.switchBtn {
    color: #ff4949;
}
</style>